<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
		<title>vue.js lls</title>
	</head>

    <body>
        <div id="app">
            <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
            <my-component></my-component>
             <component2></component2>
             <component3></component3>
             <aaa></aaa>
             <el-button @click="visible = true">按钮</el-button>
                <el-dialog v-model="visible" title="Hello world">
                <p>Element vue style?</p>
             </el-dialog>
            

            <el-button @click="getmileage">一个人</el-button>
            <el-button type="primary">二个人</el-button>
            <el-button type="text">三个人</el-button>
        </div>

        <div id="router">
            <router-link to='/a'>Go to a</router-link>
            <router-link to="/b">Go to b</router-link>
            <!--渲染view-->
            <p>通知:  </p> <router-view></router-view>

            <p v-linked="" ></p>
        </div>
    </body>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-rx.js"></script>
    <script src="http://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js"></script>
    <script src="http://cdn.bootcss.com/vue-router/2.1.1/vue-router.js"></script>
    <script src="http://cdn.bootcss.com/vuex/2.0.0/vuex.js"></script>
    <script src="http://cdn.bootcss.com/vue-validator/2.1.7/vue-validator.js"></script>
    <script src="http://cdn.bootcss.com/vue-i18n/4.7.4/vue-i18n.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://cdn.bootcss.com/rxjs/4.1.0/rx.all.js"></script>
   <!--vue-rx https://zhuanlan.zhihu.com/p/23575516-->

    <script>
        // 1.创建一个组件构造器
        var component=Vue.extend({
            template:'<div>component 1</div>'
        })
        Vue.component("component3",component)
        // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>

         
        
        Vue.component('my-component', component)
        

        Vue.component('aaa',{
             template: '<div>This is the first component!</div>'
        })

        new Vue({
            el: '#app',
             components:{//局部注册组件
                 "component2":component
             },
            data:{
                apiUrl:'http://120.26.85.230:8080/truck/mileage/issue',
                visible:false
            } ,
             ready:function(){
                 this.getmileage()
             }, 
            methods:{
                 getmileage:function(){
                 this.$http.get(this.apiUrl)
                    .then(function(response){
                                // 响应成功回调
                               // rxjs
                               if(response.status==200){
                                    console.log(response.body.code)
                               }
                    }, function(response){
                                // 响应错误回调
                                console.log("222222")
                    })
              }
            }       
        });
        
        
        // 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>hello a</div>' }
const Bar = { template: '<div>hello b</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/a', component: Foo },
  { path: '/b', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    mode: 'history',
    hashbang: false, 
    history: false,
    routes:routes, // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#router')

    </script>
</html>